<template>
  <div class="test">
    <!-- 按钮 -->
    <div class="btns">
        <el-button size="small" type="primary" @click="toAdd">添加</el-button>
        </div>
    <!-- 表格 -->
    <el-table :data="list" style="width: 100%" size="small">
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column prop="title" label="标题" width="180"> </el-table-column>
      <el-table-column prop="publish_date" label="发布日期"> </el-table-column>
      <el-table-column prop="read_times" label="阅读次数"> </el-table-column>
      <el-table-column prop="thumb_up_times" label="点赞次数"> </el-table-column>
      <el-table-column prop="thumb_down_times" label="吐槽次数"> </el-table-column>
      <el-table-column prop="status" label="状态"> </el-table-column>
      <el-table-column prop="category_id" label="所属栏目"> </el-table-column>
      <el-table-column prop="user_id" label="作者ID"> </el-table-column>
      <el-table-column label="操作" width="150" align="center"> 
          <template v-slot="scope">
               <el-button size="small" type="daanger" @click="del(scope.row)">删除</el-button>
               <el-button size="small" type="primary" @click="edit(scope.row)">修改</el-button>
          </template>
      </el-table-column>
    </el-table>
    <!-- 模态框 -->
    <el-dialog
      class="customer_mobal"
      title="添加文章"
      :visible.sync="dialogVisible"
      width="60%">
      {{form}}
            <el-form :model="form" label-width="100px">
        <el-form-item label="题目" >
           <el-input v-model="form.title" ></el-input>
        </el-form-item>
        <el-form-item label="正文" >
           <el-input v-model="form.content" ></el-input>
        </el-form-item>
        <el-form-item label="作者" >
           <el-input v-model="form.user_id" ></el-input>
        </el-form-item>
    </el-form>

        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="save" size="small">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { get, post } from '@/utils/request'
export default {
  data() {
    return {
      form: {},
      list: [],
      dialogVisible: false
    }
  },
  created() {
      this.loadDate();
       },
       methods: {
      save(){
          let url = "/cms_article/saveOrUpdate"
          post(url, this.form).then((response) => {
              this.dialogVisible = false;
              this.$message({ type: "success", message: response.message })
              this.loadDate;
          })
      },
      del(row) {
        let url = "/cms_article/deleteById"
        post(url, { id: row.id }).then((response) => {
        this.$message({ type: "success", message: response.message })
        this.loadDate();
       })
    },
      edit(row) {
        this.form = row;
        this.dialogVisible = true;
      },
       loadDate() {
          let url = "/cms_article/findAll";
          get(url).then((response) => {
               this.list = response.data;
          });
       },
    toAdd() {
      this.dialogVisible = true;
    }
  }
}
</script>